<template>
  <div>
    <el-dialog
      v-model="store.setshow"
      title="设置"
      class="setdialog"
      :modal="false"
      @close="closeset"
      :close-on-click-modal="false"
    >
      <div class="left">
        <div
          class="leftItem"
          v-for="(item, index) of columns"
          @click="changeleftItem(index)"
          :class="[
            {
              top: index + 1 == currentindex && currentindex !== 0,
            },
            {
              bottom:
                index - 1 == currentindex &&
                currentindex !== columns.length - 1,
            },
            {
              active: currentindex == index,
            },
          ]"
        >
          {{ item.name }}
        </div>
        <div
          class="residue"
          :class="{
            bottom: currentindex == columns.length - 1,
          }"
        ></div>
      </div>
      <!-- <transition name="el-fade-in-linear"> -->
        <div class="right">
          <WallPaperSet v-show="currentindex == 0" />
        </div>
      <!-- </transition> -->
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { homepage } from "@/store/index.js";

// 组件
import WallPaperSet from "@/components/WallPaperSet/index.vue";
const store = homepage();

const closeset = () => {
  store.$patch((state) => {
    store.setshow = false;
  });
};

// 当前设置的索引
const currentindex = ref(0);
const changeleftItem = (index) => {
  currentindex.value = index;
};
// left 菜单栏
let columns = [
  {
    id: 0,
    name: "壁纸设置",
  },
  {
    id: 1,
    name: "基本配置",
  },
  {
    id: 2,
    name: "敬请期待！",
  },
  {
    id: 3,
    name: "敬请期待！",
  },
];
</script>

<style lang="scss" scoped>
div :deep(.el-dialog) {
  height: 600px;
  width: 800px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-dialog__header {
    // border-bottom: 1px solid rgba(128, 128, 128, 0.5);
    margin-right: 0;
    height: 60px;
    // background: rgba(128, 128, 128, 0.5);
    background-image: linear-gradient(
      rgba(128, 128, 128, 0.5),
      rgba(128, 128, 128, 0.3)
    );
  }
  .el-dialog__body {
    flex: 1;
    padding: 0;
    display: flex;
    .left {
      width: 150px;
      display: flex;
      flex-direction: column;
      .leftItem {
        text-align: center;
        line-height: 50px;
        height: 50px;
        font-size: 16px;
        font-family: YS;
        background: rgba(128, 128, 128, 0.3);
        cursor: pointer;
        &.top {
          border-bottom-right-radius: 10px;
        }
        &.bottom {
          border-top-right-radius: 10px;
        }
        &.active {
          background: #fff;
        }
      }
      .residue {
        flex: 1;
        background: rgba(128, 128, 128, 0.3);
        &.bottom {
          border-top-right-radius: 10px;
        }
      }
    }
    .right {
      flex: 1;
      padding: 20px;
    }
  }
}
</style>
